<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/gesture-util.js"></script>
<style type="text/css">
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

#greenbox {
  width: 100px;
  height: 2000px;
  background: green;
}
#redbox {
  width: 100px;
  height: 2000px;
  background: red;
}

</style>
</head>
<body style="margin:0" onload="runTest();">

<div id="greenbox"></div>
<div id="redbox"></div>

<p id="description"></p>
<div id="console"></div>
<script type="text/javascript">

async function keyboardScrollPageDown()
{
    if (navigator.platform.indexOf('Mac') == 0) {
        eventSender.keyDown('ArrowDown', ["altKey"]);
    } else {
        eventSender.keyDown('PageDown');
    }

    await waitForCompositorCommit();
    await waitForAnimationEndTimeBased(() => { return document.scrollingElement.scrollTop; });

    // see kMinFractionToStepWhenPaging = 0.875f in ScrollableArea.cpp
    shouldBecomeEqual("document.scrollingElement.scrollTop >= window.innerHeight * 0.875", "true", keyboardScrollPageUp);
}

async function keyboardScrollPageUp()
{
    if (navigator.platform.indexOf('Mac') == 0) {
        eventSender.keyDown('ArrowUp', ["altKey"]);
    } else {
        eventSender.keyDown('PageUp');
    }

    await waitForCompositorCommit();
    await waitForAnimationEndTimeBased(() => { return document.scrollingElement.scrollTop; });

    // PageDown + PageUp goes back to 0
    shouldBecomeEqual("document.scrollingElement.scrollTop", "0", finishJSTest);
}

jsTestIsAsync = true;

async function runTest()
{
    if (window.eventSender) {
        description('This tests keyboard scrolling by pages.');
        keyboardScrollPageDown();
    } else {
        debug("This test requires DumpRenderTree.  Use PageUp/Down (or Alt-Up/Down for Mac) to validate the implementation.");
    }
}
</script>

</body>
</html>
